<template>
  <div>
    <div class="salarys">
      <!-- 工具栏 -->
      <pageTools :showBefore="true">
        <template #before>{{ tipsInfo }}</template>
      </pageTools>
      <!-- 条件筛选 -->
      <el-card class="checkBox">
        <el-form label-width="120px">
          <el-form-item label="聘用形势">
            <el-checkbox-group v-model="form.approvalsTypeChecks">
              <el-checkbox
                v-for="item in Employees"
                :key="item.id"
                :label="item.id"
                >{{ item.value }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="员工状态">
            <el-checkbox-group v-model="form.approvalsStateChecks">
              <el-checkbox
                v-for="item in EmployeesPus"
                :key="item.id"
                :label="item.id"
                >{{ item.value }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="部门">
            <el-checkbox-group v-model="form.departmentChecks">
              <el-checkbox
                v-for="item in departments"
                :key="item.id"
                :label="item.name"
                
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card>
        <el-table :data="list">
          <el-table-column label="序号">
            <template v-slot="{ $index }">
              <div>{{(page.page-1)*page.size+$index+1}}</div>
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="username"></el-table-column>
          <el-table-column label="手机" prop="mobile"></el-table-column>
          <el-table-column label="工号" prop="workNumber"></el-table-column>
          <el-table-column
            label="聘用形式"
            prop="formOfEmployment"
          >
          <template v-slot="{row}">
            <div>{{+row.formOfEmployment |formatType}}</div></template></el-table-column>
          <el-table-column label="部门" prop="departmentName"></el-table-column>
          <el-table-column
            label="入职时间"
            prop="timeOfEntry"
          >
          <template v-slot="{row}">
            <div>{{row.timeOfEntry|formatTime}}</div></template></el-table-column>
          <el-table-column label="工资基数" prop="mobile"></el-table-column>
          <el-table-column label="津贴方案" prop="mobile"></el-table-column>
          <el-table-column label="操作">
            <template>
              <div>
                <el-button type="primary">调薪</el-button>
                <el-button type="text">查看</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination
      @size-change="changeSize"
     @current-change="changePage"
      :page-sizes="[1,10,100, 200, 300, 400]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination> -->
      </el-card>
    </div>
  </div>
</template>

<script>
import Employees from '@/assets/constant/employees'
import { companyDepartment } from '@/api/departments'
import { salarysListPost } from '@/api/salary'
import { sysUserGet } from '@/api/employees'

export default {
  data () {
    return {
      departments: [],
      list: [],
      Employees: Employees.hireType,
      EmployeesPus: Employees.workingState,
      form: {
        approvalsTypeChecks: [],
        approvalsStateChecks: [],
        departmentChecks: []
      },
      page: {
        page: 1,
        size: 10,
        total: 10
      }
    }
  },
  computed: {
    tipsInfo () {
      // return `本月${this.tips.dateRange}：入职 ${this.tips.worksCount} 离职 ${this.tips.leavesCount} 调薪 ${this.tips.adjustCount} 未定薪 ${this.tips.unGradingCount}`
      return `本月0：入职 0 离职 0 调薪 0 未定薪 0`
    }
  },
  created () {
    this.getDate()
    this.salarysListPost()
    this.getData()
  },
  methods: {
    async getDate () {
    const res =await companyDepartment()
    this.departments=res.data.depts
    console.log('部门列表',res);
    },
   async salarysListPost(){
  const res=   await salarysListPost()
  console.log('薪资列表',res);
   },
   async getData(){
     const res =await sysUserGet()
     this.list =res.data.rows
     console.log('员工列表',res);
   }
  }
}
</script>

<style lang="scss" scoped>
.salarys {
  .checkBox {
    padding: 15px;
  }
}
</style>
